<template>
  <!-- 成员管理dialog -->
  <vc-dialog v-model="show" width="84%" height="70vh" title="成员编辑" title-align="left" @close="handleClose">
    <div class="container">
      <div class="left-group-list">
        <div v-for="group in groups" class="group" :class="{ 'group-active': activeGroup.id === group.id }" @click="activeGroup = group">
          <i class="icon-arrow"></i>
          <span>{{ group.name }}</span>
        </div>
      </div>
      <div class="right-content" :key="contentKey">
        <div class="form">
          <span class="label">添加成员</span>
          <member-search v-model="searchComapnyTxt" :memberIds="memberIds" :groupId="activeGroup.id" @refresh="getGroupTableData(activeGroup.id, true)"></member-search>
          <span class="btn" @click="batchImportDialog = true">批量导入</span>
        </div>
        <div class="header">
          <span class="title">成员列表（{{ totalNum }}）</span>
          <div class="menus">
            <span class="delete" @click="handleBatchDelete(memberTable)">
              <i class="icon-delete"></i>
              <span>批量删除</span>
            </span>

            <filter-search v-model="searchMemberTxt" :show-title="false" :width="200" placeholder="请输入成员名称" @enter="memberHandlerInput(queryData)" @clear="memberHandlerInput(queryData)" />
          </div>
        </div>
        <vc-table
          ref="memberTable"
          :loading="loading"
          :tableData="showTableData"
          :columns="columns"
          :defaultSort="{ field: 'monitorDate', order: 'desc' }"
          :tableConfig="tableConfig"
          @sort-change="sortChange"
        />
      </div>
    </div>
  </vc-dialog>

  <batch-import-dialog v-model="batchImportDialog" @success="handleImportSuccess"></batch-import-dialog>

  <delete-dialog
    ref="deleteDialogRef"
    v-model="memberDeleteDialog"
    :type="DELETE_TYPE.MEMBER"
    :checked-list="memberCheckedList"
    @delete="handleMemberDelete(activeGroup.id, deleteDialogRef, getGroupTableData)"
  ></delete-dialog>

  <import-result-dialog
    v-model="importResultDialog"
    :data="importResult"
    :groupId="activeGroup.id"
    :groupName="activeGroup.name"
    @refresh="getGroupTableData(activeGroup.id, true)"
  ></import-result-dialog>
</template>

<script setup lang="ts">
import { type IGroup, DELETE_TYPE, type ImportResult } from '../apis';
import BatchImportDialog from './batch-import-dialog.vue';
import MemberSearch from './member-search.vue';
import FilterSearch from '@/components/page-search/index.vue';
import DeleteDialog from './delete-dialog.vue';
import ImportResultDialog from './import-result-dialog.vue';
import { useMemberManageDialog } from '../useDialog';
import { useMemberTable } from '../useTable';

interface Props {
  modelValue: boolean;
  groups: IGroup[];
  group: IGroup;
}
const { modelValue, groups, group } = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void;
  (e: 'close'): void;
}>();

/** 自定义v-model */
const show = computed({
  get() {
    return modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

const handleClose = () => {
  if (editFlag.value) {
    emit('close');
  }
};

const activeGroup = ref(group);

const batchImportDialog = ref(false);
const handleImportSuccess = (result: ImportResult) => {
  batchImportDialog.value = false;
  importResultDialog.value = true;
  importResult.value = result;
};

const deleteDialogRef = ref();
const { contentKey, searchComapnyTxt, memberDeleteDialog, memberCheckedList, handleBatchDelete, handleMemberDelete, searchMemberTxt, memberHandlerInput } = useMemberManageDialog();

const memberTable = ref();
const { queryData, totalNum, tableData, loading, editFlag, getGroupTableData, columns, tableConfig, sortChange } = useMemberTable(activeGroup.value.id);

const importResultDialog = ref(false);
const importResult = ref<ImportResult>({
  successTotal: 0,
  failTotal: 0,
  importInfos: []
});

const memberIds = computed(() => {
  return tableData.value.map((item: any) => item.id);
});

const showTableData = computed(() => {
  if (!queryData.searchTxt) {
    return tableData.value;
  } else {
    const regExp = new RegExp(queryData.searchTxt, 'g');
    const raw = JSON.parse(JSON.stringify(tableData.value));
    const data = raw.filter((item: any) => item.name.includes(queryData.searchTxt));
    data.forEach((o: any) => {
      o.name = o.name.replace(regExp, `<span style="color:red">${queryData.searchTxt}</span>`);
    });
    return data;
  }
});

getGroupTableData(activeGroup.value.id);

const initFilter = (val: number) => {
  memberCheckedList.value = [];
  searchMemberTxt.value = '';
  searchComapnyTxt.value = '';
  queryData.groupId = val;
  queryData.offset = 0;
  queryData.sortType = 'desc';
};

watch(
  () => activeGroup.value.id,
  (val) => {
    initFilter(val);
    contentKey.value++;
    getGroupTableData(val);
  }
);
</script>

<style lang="scss" scoped>
:deep(.vc-dialog){
  .vc-dialog__dialog-title{
    padding: 0;
  }
}
.container {
  display: flex;
  height: 100%;
  .left-group-list {
    width: 200px;
    height: 100%;
    overflow-y: auto;
    @include scroll-bar(#c0c4cc, 2px);
    border-right: 1px solid #f3f3f3;
    padding-top: 10px;
    .group {
      margin: 4px 10px;
      height: 40px;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer;
      .icon-arrow {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0 8px 0 10px;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        transition: all 0.2s;
        background-image: url('');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
    .group-active {
      color: #02C680;
      background-color: rgba(231,247,243,0.3);
      .icon-arrow{
        background-image: url('');
      }
      // border-right: 3px solid #008ef4;
    }
  }
  .right-content {
    padding-bottom: 20px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .form {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      .label {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
      .btn {
        padding: 0 16px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        background-color: #02C680;
        border-radius: 4px;
        cursor: pointer;
      }
    }

    .header {
      // padding: 10px 38px 20px 20px;
      margin: 0 38px 12px 20px;
      height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
      .menus {
        :deep(.vc-search){
          .vc-input{
            height: 32px;
            padding: 0;
          }
        }
        display: inline-flex;
        align-items: center;
        gap: 36px;
        .delete {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          .icon-delete {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('');
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
}
</style>
